import React, { Suspense, useEffect, useState } from 'react';
import { useRoutes, Route, useLocation, Routes, useNavigate } from 'react-router-dom';
import { Layout, Spin } from 'antd'; // 从antd库中导入Layout, Spin和ConfigProvider
import MyHeader from './components/MyHeader'; // 导入自定义头部组件
import {MyLogin} from './pages/MyLogin'; // 导入登录页面组件
import routes from './routes/routes'; // 导入路由配置
import { getSystemStatus } from './api/login'; // 导入API请求函数
import './App.less'; // 导入样式文件

const { Header, Content } = Layout; // 解构Layout组件中的Header和Content

export default function App() {
  const [isReady, setIsReady] = useState(false); // 声明状态变量isReady，并初始化为false
  const AppRoutes = useRoutes(routes); // 获取根据路由配置生成的路由元素
  const location = useLocation(); // 获取当前路由信息
  const navigate = useNavigate(); // 获取编程导航方法

  useEffect(() => {
    // 定义异步函数获取系统状态
    const getUserStatus = async () => {
      try{
        const res = await getSystemStatus(); // 发送请求获取系统状态
        sessionStorage.setItem('isUser', res.data); // 将系统状态存储到sessionStorage
        if (res.data) {
          const token = sessionStorage.getItem('token'); // 获取token
          if (!token) {
            navigate('/login'); // 如果没有token，导航到登录页面
          }
        }
        setIsReady(true); // 设置isReady为true，表示系统状态已获取
      }catch(error){
        console.error('用户状态接口请求失败');
      }
    };

    if (!isReady) getUserStatus(); // 如果isReady为false，调用getUserStatus函数
  }, [isReady, navigate]); // useEffect依赖isReady和navigate

  if (!isReady) {
    return <Spin />; // 显示加载动画，直到系统状态准备好
  }

  return (
    <>
      <Layout className='layout-style'>
        {location.pathname === '/login' ? ( // 判断当前路径是否为登录页面
          <Routes>
            <Route path='/login' element={<MyLogin />} /> {/* 定义登录页面的路由 */}
          </Routes>
        ) : ( // 如果当前路径不是登录页面，显示应用的主布局
          <>
            <Header className='header-style'>
              <MyHeader /> {/* 显示自定义头部组件 */}
            </Header>
            <Content>
              <Suspense fallback={<Spin />}>
                {AppRoutes} {/* 显示根据路由配置生成的路由元素 */}
              </Suspense>
            </Content>
          </>
        )}
      </Layout>
    </>
  );
}
